<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>后台首页</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="height: 150px;background-image: url('./img/logo.png')">
            <el-row>
                <el-col :span="18">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                </el-col>
                <el-col :span="6">
                    <el-button icon="el-icon-search">登录</el-button>
                    <el-button icon="el-icon-search">注册</el-button>
                    <a href="back.html">
                        <el-button icon="el-icon-search">后端管理</el-button>
                    </a>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-button>添加站点</el-button>
            <el-button>添加公交</el-button>
            <el-table
                    ref="filterTable"
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="busInfoId"
                        label="公交号"
                        sortable
                        width="180"
                        column-key="busInfoId"
                        :filters="[{text: '1-100', value: '1-100'}, {text: '101-200', value: '101-200'}, {text: '201-300', value: '201-300'}, {text: '301-∞', value: '301-99999999999'}]"
                        :filter-method="filterHandler"
                >
                </el-table-column>
                <el-table-column
                        prop="line[0].station"
                        label="起点站"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="endStation"
                        label="终点站"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="路线信息"
                        :formatter="formatter">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>


        <el-drawer
                title="修改路线"
                :before-close="handleClose"
                :visible.sync="dialog"
                direction="rtl"
                custom-class="demo-drawer"
                ref="drawer"
        >
            <div class="demo-drawer__content">
                <el-form :model="form">
                    <el-form-item label="公交号" :label-width="formLabelWidth">
                        <el-input v-model="form.busInfoId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-button>添加站点</el-button>
                    <div>{{drag ? '拖拽中' : '拖拽可以修改站点顺序'}}</div>
                    <draggable v-model="form.line" chosen-class="chosen" force-fallback="true" group="people"
                               animation="1000"
                               @start="onStart" @end="onEnd">
                        <transition-group>
                            <span class="item" v-for="(element,i) in form.line" :key="element.id">
                                <span style="border: 1px solid">{{element.station}}</span>
                                <span v-if="i!==form.line.length-1"><====></span>
                            </span>
                        </transition-group>
                    </draggable>
                </el-form>
                <br>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">
                        {{ loading ? '提交中 ...' : '确 定' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>
        <el-footer>Footer</el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://www.itxst.com/package/sortable/Sortable.min.js"></script>
<script src="http://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                dialog: false,
                loading: false,
                drag: false,
                form: {},
                formLabelWidth: '80px',
                timer: null,
                tableData: [
                    {
                        busInfoId: '1',
                        line: [
                            {
                                "id": 1,
                                "station": '站点1',
                            }, {
                                "id": 2,
                                "station": '站点2',
                            }, {
                                "id": 3,
                                "station": '站点3',
                            }, {
                                "id": 4,
                                "station": '站点4',
                            }, {
                                "id": 5,
                                "station": '站点5',
                            }, {
                                "id": 6,
                                "station": '站点6',
                            },],
                        endStation: '站点6',
                        address: '站点1=>站点2=>站点3=>站点4',
                        tag: ''
                    }]
            }
        },
        methods: {
            formatter(row, column) {
                return row.address;
            },
            filterHandler(value, row, column) {
                const split = value.split("-");
                const property = column['property'];
                // console.log(parseInt(split[0]), parseInt(row[property]), parseInt(split[1]))
                if (parseInt(split[0]) <= parseInt(row[property]) && parseInt(row[property]) <= parseInt(split[1])) {
                    return true;
                } else {
                    return false;
                }
            },
            handleEdit(index, row) {
                console.log(index, row)
                this.form = this.tableData[index];
                this.dialog = true
            },
            handleDelete(index, row) {
                console.log(index, row)
            },
            onStart() {
                this.drag = true;
            },
            onEnd() {
                this.drag = false;
            }
        }
    })
</script>
</html>